<template>
  <div class="cart">
   <Tips  />

<!--    复选框订单区域-->
    <van-checkbox-group v-model="result" :disabled="isEditing">
      <van-checkbox :name="item.id" v-for="item in cartList" :key="item.id" @click="changeProductCheck(item)"   >
        <van-swipe-cell>
        <van-card
          :num="item.number"
          :price="item.retail_price"
          :title="item.goods_name"
          :thumb="item.list_pic_url"
        />
          <template #right>
            <van-button square type="danger" text="删除" @click="deleteProduct(item.product_id)"/>
          </template>
        </van-swipe-cell>
        <van-stepper v-model="item.number" v-show="isEditing" @change="setpperChange(item)"/>
      </van-checkbox>

    </van-checkbox-group>

<!--    底部提交订单区域-->
    <van-submit-bar :price="cartTotal.checkedGoodsAmount*100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checkedAll " :disabled="isEditing">全选</van-checkbox>
      <template #tip>
        累计共<span>{{cartTotal.checkedGoodsCount}}</span>件商品，可点击
        <van-button class="editBut" :type="isEditing?'primary':'danger'" size="small" @click="editBtn">
          {{isEditing?'编辑':'完成编辑'}}
        </van-button>
        按钮进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import Tips from '@/components/Tips'
import { changeProductChecked, changeSetpper, deleteProduct, getCartList } from '@/request/api'
export default {
  name: 'Cart',
  components: { Tips },
  data () {
    return {
      result:[],        //购物车商品是否选中的数组，数组中checked为1选中的商品
      cartList:[],      //购物车数据
      cartTotal:[],      //商品总信息
      value:'',
      isEditing:false,   //是否为编辑状态，如果是，则展示步进器

    }
  },
  created () {
    this.getCartListData()
  },
  computed: {
    //复选框全选
    checkedAll:{
      get(){
        return  this.result.length==this.cartList.length
      },
      set(val){
        // 处理id数组
        let ids_arr=[]
        this.cartList.map(item=>{
          ids_arr.push(item.product_id)
        })

        changeProductChecked({
          isChecked:val ? 1 : 0 ,
          productIds:ids_arr.join()
        }).then(res=>{
          this.getCartListData(res.data)
        })
      }
    }
  },
  methods: {
    // 获取购物车数据
    getCartListData(){
      getCartList().then(res=>{
        console.log(res)
        this.cartList=res.data.cartList
        this.cartTotal=res.data.cartTotal

        this.result=[]
        this.cartList.map(item=>{
          item.checked==1 ? this.result.push(item.id) : ""
        })

      })
    },
    // 编辑按钮
    editBtn(){
      this.isEditing=!this.isEditing
    },
    onSubmit(){

    },
    onClickEditAddress(){

    },
    // 点击购物车商品，选中或反选触发
    changeProductCheck(item){
      if(this.isEditing)return

      changeProductChecked({
        isChecked:item.checked==0?1:0,
        productIds:item.product_id
      }).then(res=>{
        this.getCartListData(res.data)
      })
    },
    // 步进器点击
    setpperChange(item){
      console.log(item)
      changeSetpper({
        goodsId: item.goods_id,
        id:item.id,
        number:item.number,
        productId:item.product_id
      }).then(res=>{
        this.getCartListData()
      })
    },
    // 删除购物车商品
    deleteProduct(id){
      deleteProduct({
        productIds:id.toString()
      }).then(res=>{
        this.getCartListData()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.cart{
  font-size: .18rem;
}
/deep/.van-checkbox__label{
  flex: 1;
}
.van-checkbox-group{
  background-color: #fff;
  //padding-bottom: 1.5rem;
  .van-checkbox{
    padding:.1rem .15rem;
    border-bottom: 1px solid #ccc;
  }
}
.van-submit-bar{
  bottom:.5rem;
  border-bottom: 1px solid #ccc;
}
.van-submit-bar__tip{
  height: .3rem;
  line-height: .3rem;
}
.van-stepper{
  text-align: right;
}
.van-button--square{
  height: 100%;

}
.editBut{
  bottom: .035rem;
}
</style>
